<template>
	<view class="order-evaluate">

		<view class="order-evaluate-top">
			<commodity-item :shopItem="shopItem"></commodity-item>
		</view>


		<view class="order-evaluate-content">
			<view class="order-evaluate-content-one">
				<text>评价:</text>

				<view class="" @tap="onCheckNiMing">
					<view class="check-niming uni-icon  " :class="checkNiMing?'uni-icon-circle-filled':'uni-icon-circle'">

					</view>
					匿名
				</view>
			</view>
			<view class="order-evaluate-textarea">
				<textarea value="" placeholder="说说你的心得, 你的评价能帮助其他小伙伴呦" />
				</view>
			<view class="">
				<view class="uni-uploader">
					<view class="uploader__files">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uploader__file">
								<image class="uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
							</view>
						</block>
						<view class="uploader__file">
							<view class="upload-img-input uni-icon uni-icon-plusempty" @tap="chooseImage"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-evaluate-source">
			<view class="">
				评分:
			</view>
			<view class="order-evaluate-source-item">
				<text>商品相符</text>
				<uni-rate value="5"></uni-rate>
				<text class="source-content">非常好</text>
			</view>
			<view class="order-evaluate-source-item">
				<text>物流服务</text>
				<uni-rate value="1"></uni-rate>
				<text class="source-content">非常差</text>
			</view>
			<view class="order-evaluate-source-item">
				<text>服务态度</text>
				<uni-rate value="3"></uni-rate>
				<text class="source-content">一般</text>
			</view>
		</view>

	</view>
</template>

<script>
	import commodityItem from 'components/commodity-item.vue'
	import uniRate from 'components/uni-rate.vue'

	export default {
		components: {
			commodityItem,
			uniRate,
		},
		data() {
			return {
				shopItem: {
					imgURL: "/static/img/index1/u131.jpg",
					title: "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
					price: 288.00,
					piece: 1
				},
				checkNiMing:false,
				imageList: [],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods:{
			onCheckNiMing(){
				this.checkNiMing = !this.checkNiMing;
			},
			chooseImage: async function() {
					if (this.imageList.length === 9) {
						let isContinue = await this.isFullImg();
						console.log("是否继续?", isContinue);
						if (!isContinue) {
							return;
						}
					}
					uni.chooseImage({
						sourceType: ['original', 'compressed'],
						sizeType: ['compressed', 'original'],
						count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
						success: (res) => {
							this.imageList = this.imageList.concat(res.tempFilePaths);
						}
					})
				},
				isFullImg: function() {
					return new Promise((res) => {
						uni.showModal({
							content: "已经有9张图片了,是否清空现有图片？",
							success: (e) => {
								if (e.confirm) {
									this.imageList = [];
									res(true);
								} else {
									res(false)
								}
							},
							fail: () => {
								res(false)
							}
						})
					})
				},
				previewImage: function(e) {
					var current = e.target.dataset.src
					uni.previewImage({
						current: current,
						urls: this.imageList
					})
				}
		}
	}
</script>

<style lang="scss">
	.order-evaluate {
		width: 100%;
		box-sizing: border-box;
		color: #666666;

		.order-evaluate-top {
			margin-top: 20upx;
		}

		.order-evaluate-content {
			margin: 20upx auto;
			padding: auto 5px;
			background-color: rgba(242, 242, 242, 1) ;

		}

		.order-evaluate-content-one {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 15upx 20upx;
		}

		.check-niming{
			line-height: 30upx;
			height: 30upx;
			font-weight: bold;
			font-size: 20px;
		}

		.order-evaluate-textarea {
			padding: 10px;
			
			textarea{
				background-color: #fff;
				width: 100%;
				height: 80px;
				padding: 2px;
			}
		}


		.uploader__files {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10upx;
		}

		.uploader__file {
			margin:  10upx;
			width: 170upx;
			height: 152upx;
		}
		.uploader__img {
			display: block;
			width: 170upx;
			height: 152upx;
		}

		.upload-img-input {
			color:  rgba(242, 242, 242, 1);
			width: 170upx;
			height: 152upx;
			border: 1px solid rgba(242, 242, 242, 1);
			background-color: #fff;
			font-size: 80px;
			font-weight: bold;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		
		
		.order-evaluate-source {
			margin-top: 20upx;
			padding: 20upx;
			display: flex;
			flex-direction: column;
			background-color: rgba(242, 242, 242, 1);
		}
		
		.order-evaluate-source-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-bottom: 5upx;
			margin-top: 5upx;
			
			text {
				margin-right: 20upx;
			}
		}
		
		.source-content {
			margin-left: 40upx;
			font-size: 14px;
			color: #D7D7D7;
			font-weight: bold;
		}
		
	}
</style>
